<template>
  <div class="pages">
    <el-dialog
      title="策略详情"
      width="36%"
      :visible.sync="dialogFormVisible"
    >
      <p><span>策略名称:</span>{{ name }}</p>
      <div class="table">
        <span>策略方案:</span>
        <el-table
          :data="tableData"
          style="width: 40%;"
          highlight-current-row
          type="index"
          :header-cell-style="{background:'#f3f6fb',color:'#666666','font-size':'14px','font-weight':'400','border-color': '#fff'}"
          :cell-style="{'border-color': '#fff'}"
          :row-style="{'border-color': '#fff'}"
        >
          <el-table-column label="序号" type="index" width="100" />
          <el-table-column prop="nodeName" label="点位名称" />
          <el-table-column prop="innerCode" label="设备编号" />
        </el-table>
      </div>
      <div class="footer">
        <div class="left">
          <span class="text">共{{ total }}条记录</span>
          <span class="text">第{{ pageIndex }}/{{ totalPage }}页</span>
        </div>
        <div>
          <el-button size="small" :disabled="pageIndex === '1'" @click="toTop">上一页</el-button>
          <el-button size="small" :disabled="pageIndex === totalPage || totalPage === '0'" @click="toNext">下一页</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { searchDetailList } from '@/api/strategy'
export default {
  name: 'PageTool',
  props: {
    detailId: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      tableData: [],
      total: null,
      pageIndex: 1,
      totalPage: null,
      name: null,
      obj: {
        pageIndex: 1,
        pageSize: 10
      }
    }
  },
  methods: {
    async openDialog() {
      console.log(this.obj)
      const res = { ...this.detailId, ...this.obj }
      this.dialogFormVisible = true
      const data = await searchDetailList(res)
      console.log(data)
      this.name = this.detailId.policyName
      this.tableData = data.currentPageRecords
      this.total = data.totalCount
      this.pageIndex = data.pageIndex
      this.totalPage = data.totalPage
    },
    toTop() {
      this.obj.pageIndex--
      this.openDialog()
    },
    toNext() {
      this.obj.pageIndex++
      this.openDialog()
    }
  }
}
</script>
<style scoped lang="scss">
.el-button{
    color: black;
    border-radius: 3px;
    background-color: #d5ddf8;
    border: #d5ddf8;
}
.footer{
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 20px;
    margin-left: 90px;
    .text{
      margin-right: 10px;
      color: #dedfea;
    }
}
::v-deep .el-dialog{
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
}
.table{
    display: flex;
    padding: 0 70px;
    span{
      margin-right: 20px;
    }
}
p{
  margin-left:70px;
  margin-bottom: 30px;
  span{
      margin-right: 20px;
    }
}
.el-table{
  font-weight: normal;
}
</style>
